<template>
  <div class="body">
    <div class="header">
      <div class="title" @click="goback()">
        <div class="title-h">
          <div class="icon">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ionicon"
              viewBox="0 0 512 512"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="48"
                d="M328 112L184 256l144 144"
              />
            </svg>
          </div>
          <div class="txt-h">消息</div>
        </div>
      </div>
    </div>
    <div class="content_panel">
      <!-- 循环加载 并添加逻辑判断 -->
      <div
        class="message-box"
        v-for="(item, index) in payInfoList"
        :key="index"
      >
        <div class="title">
          <div class="title-h">
            <div v-if="current_uid == item.order_payer">
              {{ item.payeeName }}
            </div>
            <div v-else>
              {{ item.payerName }}
            </div>
          </div>
          <div class="title-t">
            {{ item.order_paytime }}
          </div>
        </div>
        <div class="pay-box">
          <div class="pay-msg">
            <div v-if="current_uid == item.order_payer">付款成功</div>
            <div v-else>收款成功</div>
          </div>
          <div class="pay-money">
            <div v-if="current_uid == item.order_payer">
              ￥{{ item.ordercategory_disbursement }}
            </div>
            <div v-else>￥{{ item.ordercategory_income }}</div>
          </div>
          <div class="details">查看详情</div>
        </div>
        <div class="others">
          <div class="paytype">
            <div class="paytype-h">付款方式</div>
            <div class="paytype-c">
              {{ item.payMethod }}
            </div>
          </div>
          <div class="payfor">
            <div class="payfor-h">交易对象</div>
            <div class="payfor-c">
              <div v-if="current_uid == item.order_payer">
                {{ item.payeeName }}
              </div>
              <div v-else>
                {{ item.payerName }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MessageView",
  data() {
    return {
      payeeName: "",
      PayerName: "",
      payMsg: "",
      payMethod: "",
      current_uid: "",
      payInfoList: [],
    };
  },
  mounted() {
    this.getPayInfo();
  },
  methods: {
    async getPayInfo() {
      //从Vuex获取当前用户信息
      let user = JSON.parse(this.$store.state.Authorization);
      this.current_uid = user.user_id;

      //从后端读取数据
      let res = await this.$http.post("getPayinfo", {
        user_id: this.current_uid,
      });
      //console.log(res);
      this.payInfoList = res.data;
    },
    goback() {
      this.$router.push("/");
    },
  },
};
</script>
<style scoped>
.body {
  background-color: #f5f5f5;
  height: 100vh;
}

/* 顶部搜索栏 */
.header {
  background-color: #1678ff;
  color: #fff;
  width: 100%;
}

.header .title {
  font-size: 18px;
  margin-left: 20px;
  padding: 20px 0;
}

.title-h {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
  align-items: center;
}

.title-h .icon {
  width: 30px;
  height: 30px;
}

/* 内容 */
.content_panel {
  padding: 10px;
}

.message-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 10px 20px 10px;
  margin-bottom: 10px;
}

.message-box .title {
  font-size: 18px;
  color: #333333;
  display: flex;
  justify-content: space-between;
}

.message-box .title .title-t {
  color: #666;
  font-size: 14px;
}

.pay-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.pay-box .pay-msg {
  font-size: 18px;
}

.pay-box .pay-money {
  font-size: 40px;
  color: #000000;
}

.pay-box .details {
  font-size: 14px;
}

.paytype,
.payfor {
  display: flex;
  font-size: 14px;
}

.paytype .paytype-c {
  color: #333333;
  margin-left: 20px;
}

.payfor .payfor-c {
  color: #333333;
  margin-left: 20px;
}
</style>